<template>
  <div class="ymdiv">
    <div class="descriptions">
      <el-descriptions title="添加专题" direction="vertical" :column="3" :size="3" border>
        <el-descriptions-item label="专题名称"><el-input v-model="kcname" placeholder="名称" /></el-descriptions-item>
        <el-descriptions-item label="专题图片"
          ><el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :auto-upload="false">
            <template #trigger>
              <el-button type="primary">选择图片</el-button>
            </template>
          </el-upload></el-descriptions-item
        >
        <el-descriptions-item label="是否公开" :span="2">
          <el-switch v-model="ispublic" style="--el-switch-on-color: #13ce66" inline-prompt active-text="是" inactive-text="否"
        /></el-descriptions-item>
        <el-descriptions-item label="选择课程" :span="1">
          <el-select v-model="value" multiple placeholder="Select" style="width: 240px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item :span="4" label="备注"><el-input v-model="kcname" placeholder="备注" /></el-descriptions-item>
        <el-descriptions-item label="操作"><el-button type="primary">添加</el-button></el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { reactive, toRefs } from '@vue/reactivity';

export default defineComponent({
  setup() {
    const data = reactive({
      kcname: '',
      ispublic: false,
      isexam: false,
    });
    const value = ref([]);
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ];

    return {
      ...toRefs(data),
      value,
      options,
    };
  },
});
</script>
<style scoped>
.descriptions {
  padding: 20px;
}
</style>
